<template>
    <navigationBar id="top"></navigationBar>
    <section>
        <!-- home-container start -->
        <header class="home-container">
            <div class="container">
                <div class="swiper-wrapper" id="J_homeSwiper">
                    <!--左侧导航栏-->
                    <ul class="swiper-category-list" id="J_categoryList">
                        <li class="category-li"
                            @mouseover="currentCategory = '狗狗'"
                            @mouseleave="currentCategory = null">
                            <a class="title" @click="showAll('狗狗')">
                                狗狗
                                <em></em>
                            </a>
                        </li>
                        <li class="category-li"
                            @mouseover="currentCategory = '猫咪'"
                            @mouseleave="currentCategory = null">
                            <a class="title" @click="showAll('猫咪')">
                                猫咪
                                <em></em>
                            </a>
                        </li>
                        <li class="category-li">
                            <a class="title" @click="showAll('小宠')"
                                @mouseover="currentCategory = '小宠'"
                                @mouseleave="currentCategory = null">
                                小宠
                                <em></em>
                            </a>
                        </li>
                        <li class="category-li">
                            <a class="title" @click="showAll('水族')"
                                @mouseover="currentCategory = '水族'"
                                @mouseleave="currentCategory = null">
                                水族
                                <em></em>
                            </a>
                        </li>
                        <li class="category-li">
                            <a class="title" @click="showAll('爬虫')"
                                @mouseover="currentCategory = '爬虫'"
                                @mouseleave="currentCategory = null">
                                爬虫
                                <em></em>
                            </a>
                        </li>
                    </ul>
                    <!--轮播图-->
                    <ul class="swiper-list myclear">
                        <li v-for="(img, index) in currentImages" :key="index">
                            <a href="javascript:;">
                                <img :src="img" />
                            </a>
                        </li>
                    </ul>
                    <!-- <ul class="swiper-list myclear">
                        <li>
                            <a href="javascript:;">
                                <img
                                    src="https://pic.90sheji.com/design/00/60/20/09/36d0211e17c6e1152bb42ae411743545.png%21/fh/465/quality/90/unsharp/true/compress/true/canvas/1000x465a0a0/cvscolor/FFFFFFFF"
                                />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img
                                    src="https://img.zcool.cn/community/01e8a060a3175b11013e3b7d5f3f37.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100"
                                />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img
                                    src="https://img.zcool.cn/community/01b7d25f16e36da801215aa00321ff.jpg@1280w_1l_2o_100sh.jpg"
                                />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img
                                    src="https://img.zcool.cn/community/01a0935efc3d70a801215aa0139294.jpg@1280w_1l_2o_100sh.jpg"
                                />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img
                                    src="https://img.zcool.cn/community/0173c25bc4586aa801213deaefe7dc.jpg@2o.jpg"
                                />
                            </a>
                        </li>
                    </ul>
                    <ul class="swiper-pagination myclear">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul> -->
                </div>
                <div class="home-hero-sub myclear">
                    <ul class="home-channel-list myclear">
                        <!-- <li>
                            <a href="javascript:;"
                            ><img
                                alt="主粮"
                                src="../../assets/image/section/m1.png"
                            />主粮</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;"
                            ><img
                                alt="零食"
                                src="../../assets/image/section/m2.png"
                            />零食</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;"
                            ><img
                                alt="玩具"
                                src="../../assets/image/section/m3.png"
                            />玩具</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;"
                            ><img
                                alt="清洁"
                                src="../../assets/image/section/m4.png"
                            />清洁</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;"
                            ><img
                                alt="装扮"
                                src="../../assets/image/section/m5.png"
                            />装扮</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;"
                            ><img
                                alt="护理"
                                src="../../assets/image/section/m6.png"
                            />护理</a
                            >
                        </li> -->
                        <li>
                            热销宠物
                        </li>
                    </ul>
                    <ul class="home-promo-list myclear">
                        <li>
                            <a href=""
                            ><img
                                alt=""
                                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.SpvYUrIbtBeSJGBgpLEHGAAAAA?pid=ImgDet&w=450&h=300&rs=1"
                            /></a>
                        </li>
                        <li>
                            <a href=""
                            ><img
                                alt=""
                                src="https://img95.699pic.com/photo/40250/1179.jpg_wh860.jpg"
                            /></a>
                        </li>
                        <li>
                            <a href=""
                            ><img
                                alt=""
                                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.OBsWnmNmZsEimJmsOEYXTAHaF0?rs=1&pid=ImgDetMain"
                            /></a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <!-- home-container end -->

        <!-- 主体内容的分页部分start -->

        <!-- <div class="page-main">
            <div class="container" style="font: 10px 'Microsoft YaHei'">
                <a id="dogs"></a>
                <div class="main main-iphon">
                    <div class="box-hd">
                        <h2>狗狗</h2>
                        <div class="more2">
                            <a class="more-link" @click="showAll('狗狗')">查看全部<i></i></a>
                        </div>
                    </div>
                    <div class="box-content myclear">
                        <div class="left">
                            <ul>
                                <li class="brick-item">
                                    <a href="javascript:;">
                                        <img
                                            alt=""
                                            src="https://images.pexels.com/photos/1906153/pexels-photo-1906153.jpeg?auto=compress&cs=tinysrgb&w=600"
                                        />
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="right" style="display: block">
                            <ul class="myclear" id="dogList">
                                <li
                                    class="brick-item brick-item-m"
                                    v-for="dog in dogs"
                                    :key="dog.productId"
                                    @click="getPetDetails(dog)"
                                >
                                    <div class="figure-img"><img :src="dog.productImage"/></div>
                                    <h3 class="title">{{ dog.productNameChinese }}</h3>
                                    <p class="desc">{{ dog.productNameEnglish }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <a id="cats"></a>
                <div class="main main-iphon">
                    <div class="box-hd">
                        <h2>猫猫</h2>
                        <div class="more2">
                            <a class="more-link" @click="showAll('猫咪')">查看全部<i></i></a>
                        </div>
                    </div>
                    <div class="box-content myclear">
                        <div class="left">
                            <ul>
                                <li class="brick-item">
                                    <a href="javascript:;">
                                        <img
                                            alt=""
                                            src="https://cdn.pixabay.com/photo/2020/03/23/08/45/cat-4959941__340.jpg"
                                        /></a>
                                </li>
                            </ul>
                        </div>
                        <div class="right" style="display: block">
                            <ul class="myclear" id="catList">
                                <li
                                    class="brick-item brick-item-m"
                                    v-for="cat in cats"
                                    :key="cat.productId"
                                    @click="getPetDetails(cat)"
                                >
                                    <div class="figure-img"><img :src="cat.productImage"/></div>
                                    <h3 class="title">{{ cat.productNameChinese }}</h3>
                                    <p class="desc">{{ cat.productNameEnglish }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <a id="birds"></a>
                <div class="main main-iphon">
                    <div class="box-hd">
                        <h2>小宠</h2>
                        <div class="more2">
                            <a class="more-link" @click="showAll('小宠')">查看全部<i></i></a>
                        </div>
                    </div>
                    <div class="box-content myclear">
                        <div class="left">
                            <ul>
                                <li class="brick-item">
                                    <a href="javascript:;"
                                    ><img
                                        alt=""
                                        src="https://cdn.pixabay.com/photo/2014/07/26/19/29/weaver-402521__340.jpg"
                                    /></a>
                                </li>
                            </ul>
                        </div>
                        <div class="right" style="display: block">
                            <ul class="myclear" id="birdList">
                                <li
                                    class="brick-item brick-item-m"
                                    v-for="bird in birds"
                                    :key="bird.productId"
                                    @click="getPetDetails(bird)"
                                >
                                    <div class="figure-img"><img :src="bird.productImage"/></div>
                                    <h3 class="title">{{ bird.productNameChinese }}</h3>
                                    <p class="desc">{{ bird.productNameEnglish }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <a id="fish"></a>
                <div class="main main-iphon">
                    <div class="box-hd">
                        <h2>水族</h2>
                        <div class="more2">
                            <a class="more-link" @click="showAll('水族')">查看全部<i></i></a>
                        </div>
                    </div>
                    <div class="box-content myclear">
                        <div class="left">
                            <ul>
                                <li class="brick-item">
                                    <a href="javascript:;"
                                    ><img
                                        alt=""
                                        src="https://cdn.pixabay.com/photo/2017/08/03/10/59/nature-2575575__340.jpg"
                                    /></a>
                                </li>
                            </ul>
                        </div>
                        <div class="right" style="display: block">
                            <ul class="myclear" id="fishList">
                                <li
                                    class="brick-item brick-item-m"
                                    v-for="fish in fishes"
                                    :key="fish.productId"
                                    @click="getPetDetails(fish)"
                                >
                                    <div class="figure-img"><img :src="fish.productImage"/></div>
                                    <h3 class="title">{{ fish.productNameChinese }}</h3>
                                    <p class="desc">{{ fish.productNameEnglish }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <a id="reptiles"></a>
                <div class="main main-iphon">
                    <div class="box-hd">
                        <h2>爬虫</h2>
                        <div class="more2">
                            <a class="more-link" @click="showAll('爬虫')">查看全部<i></i></a>
                        </div>
                    </div>
                    <div class="box-content myclear">
                        <div class="left">
                            <ul>
                                <li class="brick-item">
                                    <a href="javascript:;"
                                    ><img
                                        alt=""
                                        src="https://cdn.pixabay.com/photo/2022/03/20/16/21/iguana-7081261__340.jpg"
                                    /></a>
                                </li>
                            </ul>
                        </div>
                        <div class="right" style="display: block">
                            <ul class="myclear" id="reptileList">
                                <li
                                    class="brick-item brick-item-m"
                                    v-for="reptile in reptiles"
                                    :key="reptile.productId"
                                    @click="getPetDetails(reptile)"
                                >
                                    <div class="figure-img">
                                        <img :src="reptile.productImage"/>
                                    </div>
                                    <h3 class="title">{{ reptile.productNameChinese }}</h3>
                                    <p class="desc">{{ reptile.productNameEnglish }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

        <!-- 主体内容的分页部分end -->
    </section>
    <footer>
        <!-- 固定 -->
        <div class="div_home">
            <div class="div_home" id="userButton">
                <router-link class="home2" to="/selfCenter">
                  <el-icon style="margin-top: 10px;"><User /></el-icon>
                  <span>个人中心</span>
                </router-link>
                <router-link class="home5" to="/cart">
                  <el-icon style="margin-top: 10px;"><ShoppingCart /></el-icon>
                  <span>购物车</span>
                </router-link>
                <router-link class="img_yincang" to="/">
                  <el-icon style="margin-top: 10px;" @click="goAnchor('#top')"><Top /></el-icon>
                  <span>回到顶部</span>
                </router-link>
            </div>
        </div>
    </footer>
</template>

<script>
import {defineComponent} from "vue";
import navigationBar from "../../components/header.vue";
import axios from "axios";

export default defineComponent({
    name: "index",
    data() {
        return {
            scrollTop: 0,
            dogs: [],
            cats: [],
            birds: [],
            fishes: [],
            reptiles: [],
            currentCategory: null,
            defaultImages: [
                'https://pic.ntimg.cn/file/20210923/26048058_210158881100_2.jpg',
                'https://img.zcool.cn/community/01e8a060a3175b11013e3b7d5f3f37.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100',
                'https://img.zcool.cn/community/01b7d25f16e36da801215aa00321ff.jpg@1280w_1l_2o_100sh.jpg',
                'https://img.zcool.cn/community/01a0935efc3d70a801215aa0139294.jpg@1280w_1l_2o_100sh.jpg',
                'https://img.zcool.cn/community/0173c25bc4586aa801213deaefe7dc.jpg@2o.jpg'
            ],
            categoryImages: {
                '狗狗': ['https://tse4-mm.cn.bing.net/th/id/OIP-C.O0LBQPyAtKNaezvJG70puQHaEU?rs=1&pid=ImgDetMain'],
                '猫咪': ['https://tse1-mm.cn.bing.net/th/id/OIP-C.2X3gcSPi9M0hY0O9hrLwVQHaEy?rs=1&pid=ImgDetMain'],
                '小宠': ['https://pic.616pic.com/bg_w1180/00/05/78/BED9vYuanj.jpg!/fw/1120'],
                '水族': ['https://img.tukuppt.com/ad_preview/04/86/25/649977ab95d79.jpg!/fw/780'],
                '爬虫': ['https://img95.699pic.com/photo/60102/2853.jpg_wh860.jpg']
            }
        };
    },
    components: {navigationBar},
    mounted: function () {
        this.ready();
    },
    computed:{
        //切换展示图片
        currentImages() {
            return this.currentCategory 
                ? this.categoryImages[this.currentCategory]
                : this.defaultImages
        },
    },
    methods: {
        ready() {
            let that = this;
            let config = {
                url: "/api/jpetstore/pets",
                method: "GET",
                headers: {},
            };
            axios(config)
                .then(function (response) {
                    console.log(response.data);
                    that.dogs = JSON.parse(response.data.data.dog);
                    that.dogs.forEach(function (pet) {
                        pet.productImage = `/api/jpetstore/image/look/${pet.productImage}`;
                    });
                    that.cats = JSON.parse(response.data.data.cat);
                    that.cats.forEach(function (pet) {
                        pet.productImage = `/api/jpetstore/image/look/${pet.productImage}`;
                    });
                    that.birds = JSON.parse(response.data.data.bird);
                    that.birds.forEach(function (pet) {
                        pet.productImage = `/api/jpetstore/image/look/${pet.productImage}`;
                    });
                    that.fishes = JSON.parse(response.data.data.fish);
                    that.fishes.forEach(function (pet) {
                        pet.productImage = `/api/jpetstore/image/look/${pet.productImage}`;
                    });
                    that.reptiles = JSON.parse(response.data.data.reptile);
                    that.reptiles.forEach(function (pet) {
                        pet.productImage = `/api/jpetstore/image/look/${pet.productImage}`;
                    });
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        
        showAll(category) {
            let that = this;
            sessionStorage.setItem("keyword", JSON.stringify(category));
            that.$router.push("/search");
        },

        getPetDetails(pet) {
            let that = this;
            sessionStorage.setItem("pet", JSON.stringify(pet.productId));
            that.$router.push("/details");
        },

        //锚点跳转
        goAnchor(selector) {
            /*参数selector是id选择器（#anchor14）*/
            document.querySelector(selector).scrollIntoView({
                behavior: "smooth",
            });
        },
    },
});
</script>

<style scoped>
@import "../../assets/css/style.css";
</style>
